<template>
  <div class="home">
    <h1 :class="{animate__animated:a, animate__fadeInUp:a1}">主页</h1>
    <h1 :class="{animate__animated:b, animate__fadeInUp:b1}">holle!</h1>
    <h1 :class="{animate__animated:c, animate__fadeInUp:c1}">这里啥也没有</h1>
    <h1 :class="{animate__animated:d, animate__fadeInUp:d1}">往下面看 ( 点特效 )</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      a: false,
      a1: false,
      b: false,
      b1: false,
      c: false,
      c1: false,
      d: false,
      d1: false,
    }
  },
  mounted () {
    var vm = this
    setTimeout(() => {
      vm.a = true
      vm.a1 = true
    }, 1000)
    setTimeout(() => {
      vm.b = true
      vm.b1 = true
    }, 2000)
    setTimeout(() => {
      vm.c = true
      vm.c1 = true
    }, 3000)
    setTimeout(() => {
      vm.d = true
      vm.d1 = true
    }, 4000)
  }
}
</script>
<style lang="less" scoped>
.home {
  display: block;
  overflow: hidden;
  h1 {
    text-align: center;
    line-height: 200px;
    opacity: 0;
  }
}
</style>